<template>
  <bm-overlay
    ref="customOverlay"
    class="simple"
    pane="labelPane"
    @draw="draw">
    <div v-text="text" ></div>
  </bm-overlay>
</template>

<script>
  export default {
    name: 'labelOVerlay',
    props: ['text', 'position', 'active'],
    watch: {
      position: {
        handler() {
          this.$refs.customOverlay.reload()
        },
        deep: true
      }
    },
    methods: {
      handleClick() {
        global.alert('Well done.')
      },
      draw({ el, BMap, map }) {
        const { lng, lat } = this.position
        const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat))
        el.style.left = pixel.x - 60 + 'px'
        el.style.top = pixel.y - 20 + 'px'
      }
    }
  }
</script>

<style  lang="stylus" scoped>
  .simple
    text-align:center
    padding:5px
    color: #fff
    border-radius: 15px
    font-family: PingFangSC-Medium
    font-size: 12px
    letter-spacing: 0
    height: 31px
    position: absolute
    border-radius: 5px
    background-color: rgb(64, 81, 230)
    color: #fff
    font-size: 12px
    text-align: center
    width: 84px
    &:hover
      z-index: 1
      background-color: rgba(240,65,52,.9)
      color: #fff


</style>
